

import React, { useEffect } from 'react'
import { Layout, Form, Input, Button, Checkbox, Divider, Modal } from 'antd';
import { Header, Content } from 'antd/lib/layout/layout';
import { NavLink, useLocation } from 'react-router-dom';
import { ajax } from './../../api/index';
import { useNavigate } from 'react-router-dom';






const Login = () => {
  const navigate = useNavigate()
  const DeskUser: any = JSON.parse(localStorage.getItem("DeskUser") || "0")
  const phone = new URLSearchParams(useLocation().search).get("phone")
  useEffect(() => {
    if (DeskUser) {
      navigate(`/home`)
    }
  }, [])

  const loginS = async (value: object) => {
    const res = await ajax.apiLogin(value)
    if (res.code == 200) {
      if (res.result.code == "正常") {
        navigate(`/home`);
        console.log(res);
        
        localStorage.setItem("DeskUser", JSON.stringify(res.result))
        localStorage.setItem("token", JSON.stringify(res.token))
      } else {
        Modal.error({
          title: '温馨提示',
          content: '您的账户可能出现了不可控风险，请联系客服...',
        });
      }
    }
  }

  const onFinish = (values: any) => {
    loginS(values)
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div style={{ height: "100%" }}>
      <Layout >
        <Header className='header'>
          <div>
            <a href=''>
              <img style={{ height: "35px" }} src="http://v.bootstrapmb.com/2020/8/kxifo8639/vendors/images/deskapp-logo.svg" alt="" />
            </a>
          </div>
          <div>
            <a href='/#/register' >登记</a>
          </div>
        </Header>
      </Layout>

      <Layout style={{ height: "90%", background: "#eff2f4" }}>
        <Content style={{ display: "flex", alignItems: "center" }}>
          <div className='login-left' >
            <img style={{ width: "100%" }} src="http://v.bootstrapmb.com/2020/8/kxifo8639/vendors/images/login-page-img.png" alt="" />
          </div>
          <div className='login-right'>
            <div className='login-main'>
              <p>登录DeskApp</p>

              <Form
                name="basic"
                labelCol={{ span: 0 }}
                wrapperCol={{ span: 24 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                // autoComplete="off"
                style={{ marginTop: 50 }}
              >
                <Form.Item
                  className='input1'
                  name="phone"
                  style={{ height: 50, marginTop: 35, }}
                  rules={[{ required: true, message: '手机号不能为空' }]}
                >
                  <Input style={{ height: 50, borderRadius: 5 }} placeholder="请输入您的手机号" />
                </Form.Item>

                <Form.Item
                  className='input1'
                  name="password"
                  style={{ height: 50, marginTop: 35 }}
                  rules={[{ required: true, message: '密码不能为空' }]}
                >
                  <Input.Password style={{ height: 50, borderRadius: 5 }} placeholder="请输入您的密码" />
                </Form.Item>

                <Form.Item name="remember" valuePropName="checked" style={{ marginTop: 20 }} wrapperCol={{ offset: 1, span: 24 }}>
                  <Checkbox>记住我的凭证</Checkbox>
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 0, span: 24 }}>
                  <Button type="primary" htmlType="submit" style={{ width: "100%", fontSize: 18, height: 50, borderRadius: "5px", background: "#1b00ff", color: "#fff", border: 'none', }}>
                    登入
                  </Button>
                </Form.Item>
              </Form>

              <Divider style={{ fontWeight: 600 }}>或者</Divider>
              <div className='register' >

                <NavLink to="/register"  > 注册创建账户</NavLink>
              </div>
            </div>
          </div>
        </Content>
      </Layout>

    </div>
  )
}




export default Login